<style lang="less" scoped>
@import "./main.less";
</style>

<template>
  <div class="main">
    <div class="main-sider menu-scrollbar" :style="siderStyles">
      <div class="logo" :style="logoImgStyles"></div>
      <!--菜单最多支持三级菜单-->
      <sider-menu-shrinked v-if="shrink" :menuList="menuList"
        >宜昌城市大脑电梯应急处置平台</sider-menu-shrinked
      >
      <sider-menu
        v-else
        :menuList="menuList"
        :openNames="openNames"
      ></sider-menu>
    </div>
    <div class="main-header" :style="otherStyles">
      <header-nav
        :currentPath="currentPath"
        :shrink="shrink"
        @toggleShrink="toggleShrink"
      ></header-nav>
      <tags-nav
        :pageOpenedList="pageOpenedList"
        @closeTags="closeTags"
        @tagSelected="tagSelected"
      ></tags-nav>
    </div>
    <div class="main-content common-scrollbar" :style="otherStyles">
      <keep-alive :include="cache">
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>

  import store from "@/store/store";

export default {
  name: "Main",
  data() {
    return {
      applyId: null,
      id: null,
      shrink: false,
      setTime: null,
      tokenInterval: null
    };
  },
  components: {
    "sider-menu": () => import("./components/sider-menu"),
    "sider-menu-shrinked": () => import("./components/sider-menu-shrinked"),
    "header-nav": () => import("./components/header-nav"),
    "tags-nav": () => import("./components/tags-nav")
  },
  computed: {
    logoImgStyles() {
      return {
        backgroundImage: `url(${
          this.shrink
            ? require("../../assets/logo-min.png")
            : require("../../assets/logo.png")
        })`,
        padding: this.shrink ? "11px" : "0px"
      };
    },
    siderStyles() {
      return {
        width: this.shrink ? "64px" : "208px",
        overflow: this.shrink ? "visible" : "auto"
      };
    },
    cache() {
      return this.$store.state.app.cacheList;
    },
    otherStyles() {
      return {
        left: this.shrink ? "64px" : "208px"
      };
    },
    menuList() {
      return this.$store.state.app.menuList;
    },
    currentPath() {
      return this.$store.state.app.currentPath;
    },
    pageOpenedList() {
      return this.$store.state.app.pageOpenedList;
    },
    openNames() {
      return this.$store.state.app.currentMenuOpenNames;
    }
  },
  watch: {
    $route(to) {
      // 路由变化，更新PageOpenedList
      let index = this.$util.indexOfCurrentPageOpened(
        to.name,
        this.$store.state.app.pageOpenedList
      );
      this.$store.commit("app/setPageOpenedList", { route: to, index });
      // 设置header的面包屑路径
      let currentPathArr = this.$util.initCurrentPath(
        to,
        this.$store.state.app.routesTree
      );
      this.$store.commit("app/setCurrentPath", currentPathArr);
      // 设置左侧菜单的选中项
      this.$store.commit("app/setCurrentMenuOpenNames", to.matched);
    }
  },
  methods: {
    renderFunc(a, remark) {
      this.$Notice.info({
        title: a,
        duration: 5,
        render: h => {
          return h("div", [
            h("span", remark ? remark : "维保申请待处理"),
            h(
              "Button",
              {
                style: {
                  margin: "0 5px"
                },
                props: {
                  type: "success"
                },
                on: {
                  click: () => {
                    this.sure_notise();
                  }
                }
              },
              "已读"
            ),
            h(
              "Button",
              {
                style: {
                  margin: "0 5px"
                },
                props: {
                  type: "success"
                },
                on: {
                  click: () => {
                    this.show_notise();
                  }
                }
              },
              "查看"
            )
          ]);
        }
      });
    },
    show_notise() {
      this.$router.push({
        name: "approvalProcess",
        query: { id: this.applyId }
      });
      // this.sure_notise()
    },
    sure_notise() {
      this.$http
        .post(
          this.$util.baseUrl +
            "/njliftMaint/lift-apply-message/read?id=" +
            this.id
        )
        .then(response => {
          if (response.data.code == 200) {
            this.$Notice.destroy();
          } else {
            this.$Message.error(response.data.message);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    init() {
      this.initWebConfig();
      this.timingRefreshToken();
    },
    initWebConfig() {
      // 初始化PageOpenedList
      this.$store.commit("app/setPageOpenedList");
      // 设置header的面包屑路径
      let currentPathArr = this.$util.initCurrentPath(
        this.$route,
        this.$store.state.app.routesTree
      );
      this.$store.commit("app/setCurrentPath", currentPathArr);
      // 设置左侧菜单的选中项
      this.$store.commit("app/setCurrentMenuOpenNames", this.$route.matched);
    },
    timingRefreshToken() {
      // 定时每1min刷新token，如果时间间隔为半小时，停止刷新token
      if (!sessionStorage.lastHttpRequestTime) {
        sessionStorage.lastHttpRequestTime = +new Date();
      }
      this.tokenInterval = setInterval(() => {
        if (+new Date() - sessionStorage.lastHttpRequestTime > 30 * 60 * 1000) {
          clearInterval(this.tokenInterval);
        } else {
          this.refreshToken();
        }
      }, 60000);
    },
    closeTags(action) {
      let isRemoveSelected;
      if (typeof action === "number") {
        isRemoveSelected = this.$store.state.app.pageOpenedList[action]
          .selected;
      }
      this.$store.commit("app/removePageOpenedList", {
        route: this.$route,
        action
      });
      if (isRemoveSelected) {
        // 移除单个tag，导航到最后一个tag的页面
        this.$router.push({
          name: this.$store.state.app.pageOpenedList[
            this.$store.state.app.pageOpenedList.length - 1
          ].name
        });
      } else if (action === "closeAll") {
        this.$router.push("/home");
      }
    },
    tagSelected(index) {
      if (
        this.$route.name !== this.$store.state.app.pageOpenedList[index].name
      ) {
        this.$router.push({
          name: this.$store.state.app.pageOpenedList[index].name
        });
      }
    },
    refreshToken() {
      let systemId = store.state.systemId;
      const url = `${this.$util.baseIP}/api/system/refreshToken?rememberme=${localStorage["rememberme"]}&systemId=` + systemId;
      this.$http
        .get(url)
        .then(response => {
          localStorage.token = response.data.token;
        })
        .catch();
    },
    toggleShrink() {
      this.shrink = !this.shrink;
    }
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    clearInterval(this.tokenInterval);
    clearInterval(this.setTime);
  }
};
</script>
